// eslint-disable-next-line 
import React, { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import {
    ListWrapper,
    ListItem,
    List
} from './style';
import { getCount } from '../../api/utils';
// import { withRouter } from 'react-router-dom';
// 引入
import LazyLoad from "react-lazyload";

function RecommendList(props) {
    let navigate = useNavigate();
    const enterDetail = (id) => {
        navigate(`/recommend/${id}`)
    }

    return (
        <ListWrapper>
            <h1 className="title">推荐歌单</h1>
            <List>
                {
                    props.recommendList.map((item, index) => {
                        return (
                            <ListItem key={item?.id + '' + index} onClick={() => enterDetail(item.id)}>
                                <div className="img_wrapper">
                                    <div className="decorate"></div>
                                    {/* img 标签外部包裹一层 LazyLoad */}
                                    <LazyLoad placeholder={<img width="100%" height="100%" src={require('./music.png')} alt="music" />}>
                                        {/* 加此参数可以减小请求的图片资源大小 */}
                                        <img src={item?.picUrl + "?param=300*300"} width="100%" height="100%" alt="music" />
                                    </LazyLoad>
                                    <div className="play_count">
                                        <i className="iconfont play">&#xe885;</i>
                                        <span className="count">{getCount(item.playCount)}</span>
                                    </div>
                                </div>
                                <div className="desc">{item.name}</div>
                            </ListItem>
                        )
                    })
                }
            </List>
        </ListWrapper>
    )
}
export default React.memo(RecommendList);

